<template>
    <view class="page">
        <view class="title">
            选择城市
        </view>
        <view class="search">
            <u-search v-model="keyword" placeholder="搜索城市名称" :showAction="false"></u-search>
        </view>

        <view class="search-list" v-if="keyword">
            <view class="tags">
                <view class="tag" v-for="(row,key) in searchList" :key="key" @click="setCity(row)">
                    {{row.city}}
                </view>
            </view>
        </view>
        <block v-else>
            <view class="currentCIty" v-if="area">
                <view class="lgTitle thisTitle">
                    当前城市
              	 </view>
                <view class="tags">
                    <view class="tag tagActive">
                        {{area.city}}
                    </view>
                </view>
            </view>
            <view class="currentCIty" v-for="(item,index) in areaList" :key="index">
                <view class="lgTitle thisTitle">
                    {{index}}
               	</view>
               	<view class="tags">
             		     <view class="tag" v-for="(row,key) in item" :key="key" @click="setCity(row)">
                        {{row.city}}
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        data() {
            return {
                keyword: '',
                area: false,
                areaList: {},
                searchList: []
            };
        },
        onLoad() {
            this.getArea();
            this.area = uni.getStorageSync('current_area') || false;
        },
        methods: {
            getArea() {
                this._ajax({
                    url: '/api/index/getAreaTree',
                    success: res => {
                        if (res.code == 1) {
                            var list = {};
                            for (var i in res.data) {
                                for (var j in res.data[i].childs) {
                                    var row = res.data[i].childs[j];
                                    if (!list[row.first]) {
                                        list[row.first] = [];
                                    }
                                    list[row.first].push({
                                        prov: res.data[i].name,
                                        city: row.name
                                    });
                                }
                            }
                            const ordered = {};
                            Object.keys(list).sort().forEach(function(key) {
                                ordered[key] = list[key];
                            });

                            this.areaList = ordered;
                        }
                    }
                })
            },
            setCity(row) {
                uni.setStorageSync('current_area', row);
                this._toBack();
            },
        },
        watch: {
            keyword(v) {
                if(v) {
                    var list = [];
                    for (var i in this.areaList) {
                        for (var j in this.areaList[i]) {
                            var row = this.areaList[i][j];
                            if(row.city.indexOf(v) > -1) {
                                list.push(row);
                            }
                        }
                    }
                    this.searchList = list;
                }else{
                    this.searchList = [];
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .page {
        padding: 0 34upx;
        background-color: #FFFFFF;

        .title {
            margin-top: 80upx;
            font-size: 48upx;
            font-weight: bold;

        }

        .search {
            width: 668upx;
            margin: 35upx auto;

            input {
                width: 100%;
                height: 64upx;
                background: #F5F5F5;
                opacity: 1;
                border-radius: 66upx;
                color: #666666;
                padding-left: 60upx;
            }
        }

        .currentCity {
            .thisTitle {
                padding-top: 60upx;
                padding-bottom: 30upx;
                font-weight: bolder;
            }
        }

        .tags {
            width: 100%;
            margin-top: 40upx;
            display: flex;
            flex-wrap: wrap;

            .tag {
                width: 215upx;
                height: 72upx;
                font-size: 26rpx;
                margin-right: 20upx;
                margin-bottom: 20upx;
                padding: 0 10rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                background-color: #f5f5f5;
                border: 2upx solid transparent;

                &:nth-child(3n) {
                    margin-right: 0;
                }

            }
        }
    }

    .tagActive {
        border: 2upx solid #3465B1 !important;
        color: #3465B1 !important;
    }
</style>
